<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="avalonjs - 迷你简单易用的前端MVVM框架，让你的网站更快更炫更好用">
        <meta name="keywords" content="MVVM, CSS, JavaScript, framework, avalon, web development">
        <meta name="author" content="RubyLouvre,司徒正美">


        <title>avalon中文文档</title>
        <script src="//files.cnblogs.com/files/rubylouvre/avalon.shim.js"></script>

        <!-- Bootstrap core CSS -->
        <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <link href="../../assets/css/patch.css" rel="stylesheet">

        <!-- Documentation extras -->

        <link href="../../assets/css/docs.min.css" rel="stylesheet">
        <style>
            body,html{
               overflow-y: hidden;
            }
        </style>
        <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script>
        <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
        <![endif]-->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <link rel="icon" href="/favicon.ico">

    </head>
    <body>




        <div class="container bs-docs-container">

            <div class="row">
                <div class="col-md-9" role="main">

<h2>显示隐藏处理（ms-visible）</h2>
<p>avalon通过ms-visible="expr"实现对某个元素显示隐藏控制，它的效果类拟于jQuery的toggle，
如果它后面跟着的表达式为真值时则显示它所在的元素，为假值时则隐藏。
不过想显示一个元素不是直接 display:block这么简单，众所周知，
display拥有inline, inline-block, block, list-item, table, table-cell等十来个值，
比如用户之前是让此LI元素表示inline-block，实现水平菜单效果，你直接display:block就会撑破布局。
因此元素之前是用什么样式显示，需要保存下来，当表达式转换为真值时再还原。</p>


<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;TODO supply a title&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        var model = avalon.define({
            $id: "test",
            toggle: false,
            array: [1, 2, 3, 4]
        })
        setTimeout(function() {
            model.toggle = true
        }, 3000)
    &lt;/script&gt;
    &lt;style&gt;
        table {
            width: 300px;
            border-collapse: collapse;
            border: 1px solid red;
        }
        
        td {
            padding: 5px;
            border: 1px solid red;
        }
        
        .menu {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            width: 140px;
            padding: 5px 20px;
            text-align: center;
            margin-left: 1em;
            border: 1px solid greenyellow;
        }
        
        .btn {
            padding: 5px 20px;
            margin-left: 1em;
            display: inline-block;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body ms-controller="test"&gt;
    &lt;table ms-visible="toggle" border="1"&gt;
        &lt;tr&gt;
            &lt;td&gt;1111&lt;/td&gt;
            &lt;td&gt;1111&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;1111&lt;/td&gt;
            &lt;td&gt;1111&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
    &lt;br/&gt;
    &lt;table border="1"&gt;
        &lt;tr&gt;
            &lt;td ms-visible="toggle"&gt;test&lt;/td&gt;
            &lt;td&gt;2222&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;2222&lt;/td&gt;
            &lt;td&gt;2222&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
    &lt;table border="1"&gt;
        &lt;tr ms-repeat="array"&gt;
            &lt;td ms-visible="toggle"&gt;{{el}}&lt;/td&gt;
            &lt;td ms-visible="toggle"&gt;{{el+10}}&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
    &lt;div style="display:none" class="menu" ms-visible="toggle"&gt;item&lt;/div&gt;
    &lt;div style="display:none" class="menu" ms-visible="toggle"&gt;item&lt;/div&gt;
    &lt;button style="display:none" class="btn" type="button" ms-visible="toggle"&gt;btn&lt;/button&gt;
    &lt;button style="display:none" class="btn" type="button" ms-visible="toggle"&gt;btn&lt;/button&gt;
&lt;/body&gt;

&lt;/html&gt;</pre></div>

<p><img src="../../assets/css/directives/visible/1409279194925-display.gif" /></p>

<p>上面提到表达式，是指属性值可以存在加减乘除运算与函数。我们再看以下例子：</p>
<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;TODO supply a title&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        var model = avalon.define({
            $id: "test",
            num: 5
        })
    &lt;/script&gt;

&lt;/head&gt;

&lt;body ms-controller="test"&gt;
    &lt;div ms-visible="10 - num &gt; 0"&gt;{{num}}&lt;/div&gt;
    &lt;input data-duplex-event="change" ms-duplex="num"&gt;
&lt;/body&gt;

&lt;/html&gt;</pre></div>

<p><img src="../../assets/css/directives/visible/1409279561536-display1.gif" /></p>

<p>最后我们做一个实用的例子——切换卡——来结束本章节吧。</p>

<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;TODO supply a title&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        var model = avalon.define({
            $id: "test",
            currentIndex: 0,
            toggle: function(index) {
                model.currentIndex = index
            }
        })
    &lt;/script&gt;
    &lt;style&gt;
        button {
            width: 150px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        
        .ms-tabs {
            border: 1px solid violet;
            width: 430px;
            padding: 5px;
            height: 200px;
        }
    &lt;/style&gt;

&lt;/head&gt;

&lt;body ms-controller="test"&gt;
    &lt;button ms-click="toggle(0)"&gt;触发器1&lt;/button&gt;
    &lt;button ms-click="toggle(1)"&gt;触发器2&lt;/button&gt;
    &lt;button ms-click="toggle(2)"&gt;触发器3&lt;/button&gt;
    &lt;div class="ms-tabs" ms-visible="currentIndex === 0"&gt;切换卡1
        &lt;br/&gt;其他内容&lt;/div&gt;
    &lt;div class="ms-tabs" ms-visible="currentIndex === 1"&gt;切换卡2
        &lt;br/&gt;及司徒正美&lt;/div&gt;
    &lt;div class="ms-tabs" ms-visible="currentIndex === 2"&gt;切换卡3
        &lt;br/&gt;最后一个了&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</pre></div>
<p><img src="../../assets/css/directives/visible/1409280717057-display2.gif" /></p>


</div>
<div class="col-md-3" role="complementary">

</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="../../assets/highlight/shCore.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

